<div draggable mat-dialog-title>
  <h6>{{this.getTitle()}}</h6>
  <button mat-button matSuffix mat-icon-button (click)="dialogRef.close('Close')" matTooltip="{{'close' | translate}}">
    <mat-icon svgIcon="close" style="color: darkblue;"></mat-icon>
  </button>
</div>

<div mat-dialog-content [style.height]="'320px'">
 <div class="wdl-container-dialog mat-elevation-z8" *ngIf="dataSource.length !== 0">
  <div class="wdl-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div class="wdl-table-container-small">
    <table *ngIf="alarm === 'MOVE'" mat-table [dataSource]="dataSource" class="mat-elevation-z8"
     matSort matSortActive="raisedTime" matSortDirection="desc">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="time">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"moveTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.time === 0) ? '-' :  (element.time | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"moveCount" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.value}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <table *ngIf="alarm !== 'MOVE'" mat-table [dataSource]="dataSource" class="mat-elevation-z8"
     matSort matSortActive="raisedTime" matSortDirection="desc">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="raisedTime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"raisedTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.raisedTime === 0) ? '-' :  (element.raisedTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"alarmType" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.type | translate}} </td>
      </ng-container>

      <ng-container matColumnDef="ackedTime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"ackedTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.ackedTime === 0) ? '-' :  (element.ackedTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"alarmPerson" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.personName}}</td>
      </ng-container>

      <ng-container matColumnDef="deviceId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"alarmDevice" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.deviceId}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
 </div>
 <div class="alarm-empty" *ngIf="dataSource.length === 0">{{"emptyAlarm" | translate}}</div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="dialogRef.close('Close')">{{"close" | translate}}</button>
</div>
